<!-- 瀑布流布局 -->
<template>
	<view class="vicinity">
		<cc-pullScroolView class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown" downLoadingText="">
			<u-waterfall v-model="list" ref="uWaterfall" add-time="0">
				<template v-slot:left="{leftList}">
					<view v-for="(item, index) in leftList" :key="index" @click="toDetail(item)">
						<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
						<view class="cont-box">
							<!-- <image :src="item.image" mode="widthFix"></image> -->
							<u-lazy-load border-radius="10" :image="item.image" :index="index"></u-lazy-load>
							<view id="left" class="item-box">
								<view class="text flex_r_between">
									<text>{{item.technician_nickname || item.real_name}}</text>
									<view class="address flex">
										<uni-icons type="location-filled" color="#939393" :size="16"></uni-icons>
										<text>{{(Number(item.juli) /1000).toFixed(2)}}km</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view v-for="(item, index) in rightList" :key="index" @click="toDetail(item)">
						<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
						<view class="cont-box">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image"
								:index="index"></u-lazy-load>
							<view id="left" class="item-box">
								<view class="text flex_r_between">
									<text>{{item.technician_nickname || item.real_name}}</text>
									<view class="address flex">
										<uni-icons type="location-filled" color="#939393" :size="16"></uni-icons>
										<text>{{(Number(item.juli) /1000).toFixed(2)}}km</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore :status="status" :load-text="loadText" icon-type="flower" />
		</cc-pullScroolView>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex' //引入mapState
	export default {
		computed: {
			...mapState({
				'userLocation': 'userLocation'
			}),
		},
		watch: {
			userLocation: function(newvalue, oldvalue) {
				if (newvalue.latitude != oldvalue.latitude || newvalue.longitude != oldvalue.longitude) {
					this.page = 1
					this.status = 'loading'
					this.list = []
					this.getList()
				}
			},
		},
		data() {
			return {
				list: [],

				status: 'loading',
				loadText: {
					loadmore: '',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				page: 1,
				last_page: 1,
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				let that = this
				this.request.httpTokenRequest({
					url: "service/getTechnicianByService",
					method: "get"
				}, {
					page: this.page,
					lng: this.userLocation.longitude, //
					lat: this.userLocation.latitude,
				}).then(res => {
					if (res.code == 0) {
						this.last_page = res.data.last_page
						let arr = []
						res.data.data.forEach(item => {
							this.list.push({
								image: item.work_clothes_image,
								real_name: item.real_name,
								technician_nickname:item.technician_nickname,
								juli: item.juli,
								is_data: item.is_data,
								id: item.id
							})
						})
						this.$refs.pullScroll.success();
					} else {
						this.$util.msg(res.msg)
						return
					}
				})
			},
			addList() {
				let that = this
				this.request.httpTokenRequest({
					url: "service/getTechnicianByService",
					method: "get"
				}, {
					page: this.page,
					lng: this.userLocation.longitude, //
					lat: this.userLocation.latitude,
				}).then(res => {
					if (res.code == 0) {
						this.last_page = res.data.last_page
						let arr = []
						res.data.data.forEach(item => {
							arr.push({
								image: item.work_clothes_image,
								real_name: item.real_name,
								technician_nickname:item.technician_nickname,
								juli: item.juli,
								is_data: item.is_data,
								id: item.id
							})
						})
						this.list.push(...arr);
						this.$refs.pullScroll.success();
					} else {
						this.$util.msg(res.msg)
						return
					}
				})
			},
			pullDown(pullScroll) {
				this.page = 1
				this.status = 'loading'
				this.list = []
				this.$refs.uWaterfall.clear();
				this.getList()
			},
			toDetail(item) {
				if (item.is_data == 1) {
					uni.navigateTo({
						url: '/otherpages/technician/technician?id=' + item.id + '&juli=' + item.juli
					})
				} else {
					uni.navigateTo({
						url: '/otherpages/technician/technician?id=' + item.id
					})
				}
			},
		},
		onReachBottom() {
			if (this.last_page > this.page) {
				this.status = 'loading'
				this.page++
				this.addList()
			} else {
				this.status = 'nomore'
			}
		}
	};
</script>

<style lang="scss" scoped>
	.vicinity {
		border-radius: 12rpx;
		background: #FFF;
		min-height: 100vh;
		padding: 30rpx 0 0;
		box-sizing: border-box;
	}

	.cont-box {
		margin: 0 10rpx;
		// image {
		// 	width: 100%;
		// }
		// width: 48%;
		.item-box {
			width: 100%;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);

			.img-tip {
				width: 100%;
				border-radius: 12rpx 12rpx 0 0;
			}

			.text {
				padding: 10rpx 22rpx;

				text {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}

				.address {
					text {
						font-size: 22rpx;
						color: #939393;
						line-height: 30rpx;
					}
				}
			}
		}
	}
</style>